<template>
    <div class="shop">
        <div class="container">
            <div class="title"> 穷游商城</div>
            <a href="javascript:;" class="change" @click="changeShopList">换一换</a>
            <ul class="list">
                <li class="card" v-for="item in shopList" :key="id">
                    <div class="pic">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="desc">
                        <div class="title">{{ item.title }}</div>
                        <div class="mark">{{ item.tag }}</div>
                        <div class="price" v-html="'￥' + item.price"></div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        shopList: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        //点击换一换
        changeShopList(){
            //调用父组件的方法
            this.$emit('getMoreShop')
        }
    }
};
</script>



<style lang='less' scoped>
.shop {
    background: linear-gradient(180deg, #6dd27c, #1bcdae);
    min-height: 200px;

    .container {
        width: 1160px;
        margin: 0 auto;
        position: relative;
        .change {

            position: absolute;
            top: 56px;
            right: 0;
            padding-left: 1.4em;
            color: #fff;
            background: url(https://fes.qyerstatic.com/Fv2FsRrsqF3KeHTCW1iUvxLxakBC) 0/auto 70% no-repeat;
            text-decoration: none;

        }
    }

    .title {
        position: relative;
        height: 74px;
        padding-top: 10px;
        color: #fff;
        text-align: center;
        font: 36px/74px Hiragino Sans GB, Microsoft YaHei, SimHei, SimSun, sans-serif;
    }

    .list {
        margin-right: -17px;
        overflow: hidden;
        // padding-bottom: 30px;

        .card {
            float: left;
            position: relative;
            margin-bottom: 30px;
            margin-left: 17px;
            width: 375px;
            overflow: hidden;
            background: #fff;


        }

        .pic {
            float: left;
            width: 160px;
            height: 160px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .desc {
            padding-left: 170px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 10px;

            .title {
                display: -webkit-box;
                max-height: 52px;
                font-size: 16px;
                color: #000;
                font-weight: 700;
                line-height: 26px;
                overflow: hidden;
                text-align: left;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .mark {
                display: inline-block;
                padding: 0 6px;
                box-sizing: border-box;
                border-radius: 2px;
                font-size: 14px;
                line-height: 18px;
                height: 20px;
                border: 1px solid #4a90e2;
                color: #4a90e2;
            }

            .price {
                position: absolute;
                bottom: 6px;
                right: 15px;
                font-size: 20px;
                color: #ff7362;

                /deep/ em {
                    font-size: 30px;
                    font-weight: 400;
                }
            }
        }
    }
}
</style>